<template>
     <div>
      <!-- 表单 -->
      <el-form style="width:500px"  ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="作者" >
          <el-input v-model="form.uname" clearable/>
        </el-form-item>
        <el-form-item label="作品名" >
          <el-input v-model="form.name" clearable/>
        </el-form-item>
       
        
       
        <el-form-item label="作品" >
            <el-upload
            v-model="form.imgSrc"
            :action="`http://47.94.203.104:9000/upload`"
  list-type="picture-card"
  :on-success="handleAvatarSuccess" 
          :before-upload="beforeAvatarUpload">
          <img v-if="form.icon" :src="form.icon" class="avatar">
  <i class="el-icon-plus"></i>
</el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">立即新增</el-button>
          <el-button @click="$refs.form.resetFields()">重置</el-button>
        </el-form-item>
  
      </el-form>
    </div>
</template>
<script>
import httpApi from "@/http/index.js"
export default {
  data() {
    return {
      form: {
        imgSrc:'',
        uname: '',
        name: '',
        // Browse: '',
        // donw: '',
      //  count : '',
        
      }, rules: {
        uname: [{ required: true, message: "该字段必填", trigger: "blur" }],
        // icon: [ {required:true,  message:'必填', trigger:'blur'},],
        // donw: [{ required: true,  message: "该字段必填", trigger: "blur" }],
        // Browse: [{ required: true, message: "该字段必填", trigger: "blur" }],
     
        name: [{ required: true,  message: "该字段必填", trigger: "blur" }],
        
      },
     
    }
  },
  methods: {
    submit() {
      console.log(this.form)
      
      //表单验证
      this.$refs.form.validate(valid=>{
        if(valid){
            httpApi.xifangApi.addXifang(this.form).then(res=>{
                console.log(res);
            })
            this.$refs.form.resetFields()
        }
        else{
            this.$message.error('新增失败，请稍后重试')
        }
      })
    },
   /** 上传成功后执行 */
   handleAvatarSuccess(res, file) {
      console.log(res)
      this.form.imgSrc = res.data
    },

    /** 上传文件的格式 / 大小验证 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    
   
  },  

  }

</script>

<style lang="scss" scoped> 
.avatar-uploader{
  ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius:6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 128px;
  display: block;
}
</style>